import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import * as todoActions from '../store/actions/todo.actions'

function Header(props) {
    const addTodo = function (ev) {
        if (ev.keyCode === 13) {
            if (ev.target.value.trim().length === 0) {
                alert("请输入任务名称")
                return
            }
            props.add_todo(ev.target.value.trim())
            ev.target.value = ''
        }
    }
    return (
        <header className="header">
            <h1>todos</h1>
            <input onKeyUp={addTodo.bind()}  className="new-todo" placeholder="还有什么任务没有完成?" />
        </header>
    );
}

const mapHeaderProps = state => ({
    header: state.todoReducer.todos
})

const mapHeaderActions = dispatch => ({
    ...bindActionCreators(todoActions, dispatch)
})

export default connect(mapHeaderProps, mapHeaderActions)(Header)
